<template>
    <div class="group-order-list">
        <div class="list-header">
            <div class="unselected-btn" :class="{selected: active === 1}" @click="onChange(1)" :disabled="finished">我发起的</div>
            <div class="unselected-btn" :class="{selected: active === 0}" @click="onChange(0)" :disabled="finished">我参与的</div>
        </div>
        <div class="order-list">
            <!-- <div v-if="orderList.length > 0"> -->
                <div v-for="(good, key) in orderList" :key="key" class="cell">
                    <div @click="toDetail(good)">
                        <div class="top">
                            <div class="number">
                                订单号：{{good.oid.order_id}}
                            </div>
                            <div>{{good.status_cn}}<span v-if="good.status != 0">({{good.num}})</span></div>
                        </div>
                        <div class="g-body">
                            <order-goods :orderGoods="good.products" :type="type"></order-goods>
                        </div>
                        <div class="total">
                            <div>数量：{{good.products[0].num}}</div>
                            <div>合计：{{good.money | moneyFmt(2, '￥')}}</div>
                        </div>
                        <div class="line"></div>
                    </div>
                    <group-order-btn :good="good" type="list" :active="active"/>
                </div>
            <!-- </div> -->
            <infinite-loading  :identifier="infiniteId"
                               @infinite="getGroupOrderList"
                               spinner="circles"
            >
                <div class="no-more" slot="no-more">没有更多了</div>
                <div class="no-more" slot="no-results">暂时没有相关订单</div>
            </infinite-loading>
        </div>
    </div>
</template>

<script>
    import API from '../../../request/api'
    import OrderBtn from "../../../components/User/orderbtn";
    import OrderGoods from "../../../components/User/order-goods";
    import {commonMixin} from '@/common/mixin';
    import GroupOrderBtn from "../../../components/User/groupOrderBtn";
    export default {
        components: {
            GroupOrderBtn,
            OrderGoods,
            OrderBtn
        },
        mixins: [commonMixin],
        name: "group-order-list",
        data(){
            return{
                active: 1,
                page: 1,
                size: 20,
                loading: false,
                finished: false,
                orderList:[],
                type: 4,
                infiniteId: +new Date(), // 该值改变后重新调用handler方法
            }
        },
        created(){
            this.showGlobaLoading()
        },
        methods:{
            onChange(index){
                if(this.active != index){
                    this.active = index;
                }
            },
            getGroupOrderList($state){
                setTimeout(() => {
                    this.request.get(API.groupOrderList, {
                        type: this.active,
                        page: this.page,
                        size: this.size
                    }).then((res) => {
                        if (res.list.length) {
                            this.orderList.push(...res.list)
                            this.page += 1;
                            $state.loaded();
                        } else {
                            $state.complete();
                        }
                        this.hideGlobaLoading(); //关闭loading
                    }).catch((err) => {
                        this.hideGlobaLoading(); //关闭loading
                        console.error('groupOrderList-err', err);
                    });
                },500)
            },
            toDetail(good){
                this.$router.push({
                    name: 'group-order-detail',
                    query: {
                        pid: good.poid,
                        oid: good.oid.order_id,
                        active: this.active
                    }
                });
            },
        },
        watch:{
            active(){
                this.orderList =[];
                this.page = 1;
                this.infiniteId += 1;
                this.showGlobaLoading()
                console.log('watch--newId,', this.active);
            },
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .group-order-list {
        width 100%
        overflow-x hidden
    }
    .list-header{
        width vw(375)
        height vw(55)
        position fixed
        top 0
        background-color grayF
        display flex
        flex-direction row
        justify-content space-around
        align-items center
        z-index 999
        .unselected-btn{
            secondary-hollow()
        }
        .selected{
            secondary-solid()
        }
    }
    .order-list{
        margin-top vw(65)
        height vh(600)
    }
    .cell{
        margin-top vw(10)
        background-color grayF
        padding 0
        .top{
            display flex
            align-items center
            justify-content space-between
            font-size word12
            color main-color
            padding cellPadding cellPadding 0
            .number{
                display flex
                align-items center
                color gray3
                .lq{
                    width vw(24)
                    height vw(24)
                    fill #F8BE43
                    margin-right titleMargin
                }
            }
        }
        .total{
            display flex
            align-items center
            justify-content space-between
            padding 0 cellPadding
        }
        .line{
            width 100vw
            height vw(1)
            background-color #f8f8f8
        }
    }
    .no-result{
        text-align center
        color gray9
        line-height vw(30)
        margin middleMargin
    }
</style>
